<template>
  <div class="movie-section">
    <div class="movie-category">
      <div class="category-name">{{ movie_types[section.type] }}</div>
      <router-link :to="'/more/' + section.type">
        <div class="category-more">查看更多</div>
      </router-link>
    </div>
    <div class="movie-list">
      <Movie
        v-for="(item, index) in section.movies"
        :movie="item"
        :key="index"
      />
    </div>
  </div>
</template>
<script>
import { defineComponent, inject } from "vue";
import Movie from "./Movie";
export default defineComponent({
  props: ["section"],
  name: "MovieSection",
  components: {
    Movie,
  },
  setup() {
    const movie_types = inject("movie_types");
    return {
      movie_types,
    };
  },
});
</script>
<style scoped>
.movie-section {
  margin-top: 20px;
  box-sizing: border-box;
}

.movie-category {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.category-name {
  width: 80px;
  height: 18px;
  line-height: 18px;
  color: #333333;
  font-weight: bold;
  font-size: 16px;
  border-left: 3px solid #42bd56;
}

.category-more {
  width: 80px;
  padding-right: 5px;
  font-size: 16px;
  color: #42bd56;
}

.movie-list {
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 10px;
  width: 100%;
  overflow-x: scroll;
  /* overflow-y: hidden; */
}
</style>
